import React, { ReactNode, useEffect, useState } from 'react';
import styles from './index.less'
import { Cascader, Breadcrumb, Collapse, Progress, Table } from 'antd';
import { CascaderValueType } from 'antd/lib/cascader';
import { SettingOutlined, DownOutlined, UpOutlined } from '@ant-design/icons';
import { observer } from 'mobx-react-lite'
import useStore from '@/context/useStore';
import { IRouteComponentProps } from "umi";


const { Panel } = Collapse;
const TrainingPlan: React.FC<IRouteComponentProps> = ({ location }) => {
  let [ind, setInd] = useState(0)
  let { training } = useStore();
  // 详情页的id
  let [ids, setids] = useState("");
  // 默认的id9
  let [mmids, setMmids] = useState("")
  console.log(location);

  if (location.query.plan_id) {
    useEffect(() => {
      setids(location.query.plan_id as string);
      setMmids(location.query.calss_id as string)
    }, [])
  }
  console.log(ids);
  // 如果是详情的话
  if (ids) {
    // 我设置详情页的数据
    console.log("详情数据", ids);
    useEffect(() => {
      async function ync() {
        await training.getinfo();
        await training.selectClassPlan();
        let res = await training.selectClassPlanInit(mmids, ids);
      }
      ync()
    }, [])
  } else {
    console.log("非详情数据", ids);
    useEffect(() => {
      async function ync() {
        await training.getinfo();
        await training.selectClassPlan();
        await training.selectClassPlanInit(training.selectData[0].classid, training.selectData[0].id)
      }
      ync()
    }, [])
  }
  let arr = [{
    align: "center" as "center",
    title: "姓名",
    dataIndex: 'username',
    width: 100,
    className: 'drag-visible',
    key: "1",//不是这个key的问题
  }]


  let columns = arr.concat(training.groupData.list && training.groupData.list[0].stuList[0].sProList.map((item: any) => {
    console.log(item);
    return {
      title: item.proname,
      dataIndex: 'proname',
      width: "auto",
      className: 'drag-visible',
      key: "item.proid",//不是这个key的问题
      align: "center",
      render: (row: any) => {
        // 进度条
        return <span><Progress strokeColor="#1890FF33" percent={Math.floor(Math.random() * (99 - 0)) + 0} key={+new Date()} /></span>//不是这个key的问题
      }
    }
  }))



  const selectChange = (value: CascaderValueType) => {
    if (!value[0]) {
      training.selectClassPlanInit(training.selectData[0].classid, training.selectData[0].id)
      setInd(0)
    } else {
      training.selectClassPlanInit(training.selectData[Number(value[0])].classid, training.selectData[Number(value[0])].id)
      training.classRank(training.selectData[Number(value[0])].id)
      setInd(Number(value[0]))
    }
  }
  const genExtra: ReactNode = () => (
    <SettingOutlined
      onClick={event => {
        event.stopPropagation();
      }}
    />
  )
  return <div className={styles.trainingbody}>
    <div className={styles.planhead}>
      <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
        <Breadcrumb.Item>进度</Breadcrumb.Item>
        <Breadcrumb.Item>进度监控</Breadcrumb.Item>
      </Breadcrumb>
    </div>
    <div className={styles.planmain}>
      <div className={styles.planmaintop}>
        <div>
          <p style={{ fontSize: '17px' }}>{training.selectData[0] && training.selectData[0].className}</p>
          <p>
            <span style={{ fontSize: '19px', fontWeight: 500 }}>{training.selectData[0] && training.selectData[ind].planname}</span>
            <Cascader onChange={selectChange} style={{ width: "240px" }} popupClassName={styles.option} options={training.selectData && training.selectData.map((item, ind) => {
              return { value: ind, label: item.planname }
            })} placeholder="请选择" />
          </p>
          <p style={{ fontSize: '12px' }}>{training.selectData[ind] && training.selectData[ind].begintime}~{training.selectData[ind] && training.selectData[ind].endtime}</p>
          <div>
            <p><span style={{ color: '#679cf6' }}>{training.selectData[0] && training.selectData[ind].countStus}</span><span>总人数</span></p>
            <p><span style={{ color: '#80879b' }}>{training.selectData[0] && training.selectData[ind].progress}%</span><span>完成率</span></p>
            <p><span style={{ color: '#3bc9a9' }}>{training.selectData[0] && training.selectData[ind].countCompleted ? training.selectData[ind].countCompleted : 0}</span><span>按期完成人数</span></p>
            <p><span style={{ color: 'red' }}>{training.groupData.countUncompleted ? training.groupData.countUncompleted : 0}</span><span>延期未完成人数</span></p>
          </div>
        </div>
      </div>

      <div className={styles.planmainbody}>
        <div className={styles.left}>
          {
            training.groupData.list && training.groupData.list.map((item, ind) => {
              item.stuList.map((item1, index) => {
                // console.log(item1);  
              })
              return <div key={item.id}>
                <div>
                  <p>{item.groupname}</p>
                  <div><Progress percent={item.groupProgress} /></div>
                  <p>
                    <span><img style={{ width: "25px", height: "25px", boxSizing: "border-box" }} src="http://111.203.59.61:8060/static/img/person.358ba865.svg" alt="" /> <span>人员</span> <span>{item.members}</span></span>
                    <span><img style={{ width: "25px", height: "25px", boxSizing: "border-box" }} src="http://111.203.59.61:8060/static/img/complete.ac9f6b54.svg" alt="" /> 按期完成 {item.finished}</span>
                    <span><img style={{ width: "25px", height: "25px", boxSizing: "border-box" }} src="http://111.203.59.61:8060/static/img/nocomplete.3f20402c.svg" alt="" /> 延期未完成 {item.unfinished}</span>
                  </p>
                </div>
                <Collapse bordered={false} defaultActiveKey={['1']} >
                  <Panel
                    // key={+new Date()}
                    header={<div className={styles.status}><span><b>·</b>完成</span><span><b>·</b>进行中</span><span><b>·</b>未进行</span></div>}
                    showArrow={false} key={`${ind + 1}`} extra={(ind + 1 == 1) ? <div style={{ position: "absolute", right: "20px", top: "10px" }}>收起<DownOutlined /></div> : <div style={{ position: "absolute", right: "20px", top: "10px" }}>展开<UpOutlined /></div>}>
                    <Table bordered dataSource={item.stuList} pagination={false} columns={columns} rowKey='item.id' />
                  </Panel>
                </Collapse>
              </div>
            })
          }
        </div>




        {/*  班级排行榜 */}
        <div className={styles.right}>
          <h2>班级排行榜</h2>
          <ul>
            {
              training.classRanklist.length ? training.classRanklist.map(item => {
                return <li key={item.groupid}>
                  <img style={{ width: '40px', height: '40px', borderRadius: "50%", marginLeft: "10px" }} src={`http://111.203.59.61:8060` + item.studentUrl} alt="" />
                  <div><p>{item.username}</p><span>{item.groupname}</span></div>
                  <div style={{ color: 'red' }}>0%</div>
                </li>
              }) : <span>暂无数据</span>
            }
          </ul>
        </div>
      </div>
    </div>
  </div>
}
export default observer(TrainingPlan)